/* =============================================================================
   320px and up (1 column)
   ========================================================================== */
[role="main"],
footer {
  margin-right: auto;
  margin-left: auto;
  padding: 0 18px;
  max-width: 1290px;
}

header div {
  margin-right: auto;
  margin-left: auto;
  max-width: 1290px;
}

.primary > *,
.secondary > * {
  margin-bottom: 18px;
}

article {
  max-width: 732px;
}

#modal-window {
  top: 10%;
  left: 50%;
  width: 284px;
  margin-left: -142px;
}

#modal-window-inner {
  max-height: 334px;
}

/* =============================================================================
   480px and up
   ========================================================================== */
@media only screen and (min-width: 480px) {
  #modal-window {
    width: 426px;
    margin-left: -213px;
  }

  #modal-window-inner {
    max-height: 218px;
  }
}
/* =============================================================================
   768px and up (2 column)
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .primary {
    float: left;
    width: 100%;
  }
  .primary > * {
    margin-right: 302px;
  }

  .secondary {
    float: left;
    width: 302px;
    margin-left: -302px;
  }
  .secondary > * {
    float: left;
    width: 284px;
    margin-left: 18px;
  }

  #modal-window {
    width: 640px;
    margin-left: -320px;
  }

  #modal-window-inner {
    max-height: 480px;
  }
}
